<template>
  <PageWrapper title="添加教师" contentFullHeight>
    <CollapseContainer title="填写表单">
      <BasicForm
        autoFocusFirstItem
        autoSubmitOnEnter:true
        :submitButtonOptions="submitConfig"
        :labelWidth="100"
        :schemas="schemas"
        :actionColOptions="{ span: 24 }"
        @submit="handleSubmit"
      />
    </CollapseContainer>
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicForm, ButtonProps, FormSchema } from '/@/components/Form/index';
  import { CollapseContainer } from '/@/components/Container';
  import { PageWrapper } from '/@/components/Page';
  import { isNameExist, teacherAdd } from '../../api/preschool/teacher';
  import { useMessage } from '/@/hooks/web/useMessage';
  const schemas: FormSchema[] = [
    {
      field: 'divider-basic',
      component: 'Divider',
      label: '基本信息',
      colProps: {
        span: 24,
      },
    },
    {
      field: 'name',
      rules: [
        {
          required: true,
          // [\u4e00 - \u9fa5]  ==> 可以匹配2万多中文繁简体字符
          validator: async (_rule, value) => {
            if (!value) {
              return Promise.reject('请输入姓名');
            }
            if (!/[\u4e00-\u9fa5]{1,6}/.test(value)) {
              /* eslint-disable-next-line */
              return Promise.reject('姓名只能是中文');
            }
            return Promise.resolve();
          },
          trigger: 'change',
        },
        {
          validator(_rule, value) {
            if (!value) {
              return Promise.resolve();
            } else {
              return new Promise((resolve, reject) => {
                isNameExist(encodeURI(value))
                  .then(() => resolve())
                  .catch((error) => {
                    reject(error.message || '验证失败');
                  });
              });
            }
          },
        },
      ],
      component: 'Input',
      label: '姓名',
      colProps: {
        span: 8,
      },
      componentProps: ({ schema, formModel }) => {
        console.log('form:', schema);
        console.log('formModel:', formModel);
        return {
          placeholder: '请输入姓名',
          onChange: (e: any) => {
            console.log(e);
          },
        };
      },
    },
    {
      field: 'qualificationCqertqificateNo',
      label: '教师资格证号',
      rules: [
        {
          required: true,
          validator: async (_rule, value) => {
            if (!value) {
              return Promise.reject('请输入教师资格证号');
            }
            console.log(value as string);
            if ((value as string).length !== 17) return Promise.reject('教师资格证号不和法');
            return Promise.resolve();
          },
        },
      ],
      component: 'Input',
      colProps: {
        span: 8,
      },
    },
    {
      field: 'teacherPhone',
      label: '教师手机号',
      rules: [
        {
          required: true,
          validator: async (_rule, value) => {
            if (!value) {
              return Promise.reject('请输入电话号码');
            }
            if (!/^1[3456789]\d{9}$/.test(value)) return Promise.reject('请输入有效电话号码');
            return Promise.resolve();
          },
          trigger: 'change',
        },
      ],
      component: 'InputNumber',
      colProps: {
        span: 8,
      },
    },
    {
      field: 'level',
      rules: [{ required: true, type: 'number' }],
      component: 'Select',
      label: '级别',
      colProps: {
        span: 8,
      },
      componentProps: {
        options: [
          {
            label: '高级讲师',
            value: 1,
            key: '1',
          },
          {
            label: '首席讲师',
            value: 2,
            key: '2',
          },
        ],
      },
    },
    {
      field: 'career',
      rules: [{ required: true }],
      label: '资历',
      component: 'Input',
      colProps: {
        span: 8,
      },
    },
    {
      field: 'intro',
      rules: [{ required: true }],
      label: '简介',
      component: 'InputTextArea',
      colProps: {
        span: 16,
      },
    },
  ];

  export default defineComponent({
    components: { BasicForm, CollapseContainer, PageWrapper },
    setup() {
      const check = ref(null);
      const submitConfig: ButtonProps = {
        text: '提交',
      };
      const onClick = () => {
        let value = encodeURI('中文');
        console.log(value);
        isNameExist(value)
          .then((res) => console.log(res))
          .catch((error) => {
            console.log(error);
          });
      };
      const { createSuccessModal } = useMessage();
      return {
        schemas,
        handleSubmit: (values: any) => {
          console.log('values', values);
          teacherAdd(values)
            .then((res) => {
              console.log('res=>', res);
              createSuccessModal({
                title: '添加成功',
                content: `工号:  ${(res as any).teacherNo}`,
              });
            })
            .catch((error) => {
              console.log('error' + error);
            });
        },
        check,
        // 霖
        submitConfig,
        onClick,
      };
    },
  });
</script>
